<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card class="box-card">
			<!-- 搜索与添加区域 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" @change="getUserList" clearable>
						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
				</el-col>
			</el-row>

			<!-- 用户列表区域 -->
			<el-table :data="userList" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="名字" prop="username"></el-table-column>
				<el-table-column label="邮箱" prop="email"></el-table-column>
				<el-table-column label="电话" prop="mobile"></el-table-column>
				<el-table-column label="角色" prop="role_name"></el-table-column>
				<el-table-column label="状态" prop="mg_state">
					<template v-slot="scope">
						<!--{{scope.row}}可以获得这行的数据  -->
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="190">
					<template v-slot="scope">
						<!-- 修改按钮 -->
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="mini"
							@click="showEditDialog(scope.row.id)"
						></el-button>
						<!-- 删除按钮 -->
						<el-button
							type="danger"
							icon="el-icon-delete"
							size="mini"
							@click="removeUserById(scope.row.id)"
						></el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[1,2,5,10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>

		<!-- 添加用户的对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
			<!-- 内容区 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addForm.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addForm.password"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="addForm.email"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model="addForm.mobile"></el-input>
				</el-form-item>
			</el-form>
			<!-- 按钮区 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 编辑用户的对话框 -->
		<el-dialog title="修改用户信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<!-- 内容区 -->
			<el-form :model="editForm" :rules="addFormRules" ref="editFormRef" label-width="70px">
				<el-form-item label="用户名">
					<el-input v-model="editForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="editForm.email"></el-input>
				</el-form-item>
				<el-form-item label="手机" prop="mobile">
					<el-input v-model="editForm.mobile"></el-input>
				</el-form-item>
			</el-form>
			<!-- 按钮区 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserInfo">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 分配角色的对话框 -->
		<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%">
			<div>
				<p>当前的用户：{{userinfo.username}}</p>
				<p>当前的角色：{{userinfo.role_name}}</p>
				<p>
					分配新角色：
					<el-select v-model="selectedRoleId" placeholder="请选择">
						<el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
					</el-select>
				</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="setRoleDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		//自定义验证邮箱规则
		var checkEmail = (rule, value, cb) => {
			const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			if (regEmail.test(value)) return cb()
			cb(new Error('邮箱验证失败'))
		}
		//验证手机
		var checkMobile = (rule, value, cb) => {
			const regMobile = /^1[3456789]\d{9}$/
			if (regMobile.test(value)) return cb()
			cb(new Error('手机验证失败'))
		}
		return {
			queryInfo: {
				query: '',
				pagenum: 1, //当前页数
				pagesize: 2 //每页显示多少条数据
			},
			/* 用户列表 */
			userList: [],
			total: 0,
			addDialogVisible: false,
			addForm: {
				username: '',
				password: '',
				email: '',
				mobile: ''
			},
			addFormRules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					{
						min: 3,
						max: 10,
						message: '长度在 3 到 10 个字符',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15 个字符',
						trigger: 'blur'
					}
				],
				email: [
					{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					},
					{ validator: checkEmail, trigger: 'blur' } //自定义的验证规则
				],
				mobile: [
					{
						required: true,
						message: '请输入手机',
						trigger: 'blur'
					},
					{ validator: checkMobile, trigger: 'blur' }
				]
			},
			editDialogVisible: false,
			editForm: {},
			setRoleDialogVisible: false,
			userinfo: {},
			roleList: [],
			selectedRoleId: ''
		}
	},
	created() {
		this.getUserList()
	},
	methods: {
		async getUserList() {
			// 获取数据
			const { data: res } = await this.$http.get('users', {
				params: this.queryInfo
			})
			if (res.meta.status !== 200)
				return this.$message.error({
					message: res.meta.msg,
					offset: 100
				})
			this.userList = res.data.users
			this.total = res.data.total
		},
		handleSizeChange(newSize) {
			//监听pagesize改变的函数
			this.queryInfo.pagesize = newSize
			this.getUserList()
		},
		handleCurrentChange(newPage) {
			//监听页码值改变
			this.queryInfo.pagenum = newPage
			this.getUserList()
		},
		async userStateChanged(userinfo) {
			//监听switch状态改变
			userinfo.id = parseInt(userinfo.id)
			const { data: res } = await this.$http.put(
				`users/${userinfo.id}/state/${userinfo.mg_state}`
			)
			if (res.meta.status !== 200) {
				userinfo.mg_state = !userinfo.mg_state
				return this.$message.error({ message: '更新失败', offset: 100 })
			}
			this.$message.success({ message: '更新成功', offset: 100 })
		},
		addDialogClosed() {
			//添加用户的对话框关闭事件
			this.$refs.addFormRef.resetFields()
		},
		addUser() {
			//确定按钮的事件
			//验证表单
			this.$refs.addFormRef.validate(async valid => {
				if (!valid) {
					return
				}
				//发起添加用户请求
				const { data: res } = await this.$http.post(
					'users',
					this.addForm
				)
				if (res.meta.status !== 201) {
					return this.$message.error({
						message: res.meta.msg,
						offset: 100
					})
				}
				this.$message.success({ message: res.meta.msg, offset: 100 })
				this.addDialogVisible = false
				this.getUserList()
			})
		},
		async showEditDialog(id) {
			//点击修改按钮触发编辑用户
			this.editDialogVisible = true
			const { data: res } = await this.$http.get('users/' + id)
			if (res.meta.status !== 200) {
				return this.$message.error({
					message: res.meta.msg,
					offset: 100
				})
			}
			this.editForm = res.data
		},
		editDialogClosed() {
			//修改用户信息的对话框关闭事件
			this.$refs.editFormRef.resetFields()
		},
		editUserInfo() {
			//修改框确定按钮的事件
			this.$refs.editFormRef.validate(async valid => {
				if (!valid) {
					return
				}
				const { data: res } = await this.$http.put(
					'users/' + this.editForm.id,
					{ email: this.editForm.email, mobile: this.editForm.mobile }
				)

				if (res.meta.status !== 200) {
					return this.$message.error({
						message: res.meta.msg,
						offset: 100
					})
				}
				this.$message.success({ message: res.meta.msg, offset: 100 })
				this.editDialogVisible = false
				this.getUserList()
			})
		},
		async removeUserById(id) {
			const confirmResult = await this.$confirm(
				'此操作将永久删除该用户, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除',
					offset: 100
				})
			}) //点击确定返回字符串confirm，点击返回返回字符串cancel
			if (confirmResult !== 'confirm') {
				return
			}
			const { data: res } = await this.$http.delete('users/' + id)
			if (res.meta.status !== 200) {
				return this.$message.error({
					message: res.meta.msg,
					offset: 100
				})
			}
			this.$message({
				type: 'success',
				message: '删除成功!',
				offset: 100
			})
			this.getUserList()
		},
		async setRole(userInfo) {
			//分配角色的对话框
			this.selectedRoleId = ''
			this.setRoleDialogVisible = true
			const { data: res } = await this.$http.get('roles')
			if (res.meta.status !== 200) {
				return this.$message.error({
					message: res.meta.msg,
					offset: 100
				})
			}
			this.roleList = res.data

			this.userinfo = userInfo
		},
		async saveRoleInfo() {
			//确定按钮的事件
			if (!this.selectedRoleId) {
				return this.$message.error({
					message: '请选择要分配的角色',
					offset: 100
				})
			}
			const { data: res } = await this.$http.put(
				`users/${this.userinfo.id}/role`,
				{
					rid: this.selectedRoleId
				}
			)
			if (res.meta.status !== 200) {
				return this.$message.error({
					message: res.meta.msg,
					offset: 100
				})
			}
			this.$message.success({
				message: res.meta.msg,
				offset: 100
			})
			this.getUserList()
			this.setRoleDialogVisible = false
		}
	}
}
</script>
<style lang="less" scoped>
</style>